/**
 * Created by Dalyn on 2017/5/4.
 */
import React from "react";
import Relay from 'react-relay';
import Util from "../../../util/Util"
import {hashHistory} from 'react-router';
import { Table, Icon, message, Tooltip } from 'antd';
import ListProgressMutation from './mutation/ListProgress';

import {Button} from 'fly';

export default class ProductionProcess extends React.Component {
    constructor(){
        super();
        this.state={
            totalResult : '',          //分页总条数
            pageSize : '10',      //每页显示条数
            pageNum : '1',
            processData: [],
            searchInput: '',
            loading: true,
            styleNo: ''
        }
        this.uid = sessionStorage.getItem('uid')
        this.enterpriseId = sessionStorage.getItem('enterpriseId')
    }

    componentWillMount() {
        this.getProductProcess()
    }

    getProductProcess() {
        Relay.Store.commitUpdate(
            new ListProgressMutation({
                enterpriseId: this.enterpriseId,
                styleNo:this.state.styleNo,
                pageSize: this.state.pageSize,
                pageNum: this.state.pageNum,
            }),
            {
                onFailure: () => {
                    message.error("请求失败")
                    this.setState({
                        loading: false
                    })
                },
                onSuccess: (response) => {
                    let data = response.listProgress.listProgress
                    if(data.errorCode == 0) {
                        this.setState({
                            processData: data.productionProgressModels,
                            loading: false
                        })
                    } else {
                        this.setState({
                            loading: false
                        })
                        message.error(data.value)
                    }
                }
            }
        );
    }

    _SearchByClient(){
        this.setState({
            pageNum: 1,
            styleNo:this.refs.styleNo.value
        },()=>{
            this.getProductProcess()
        })
    }

    render() {
        const columns = [
            {
                title: '订单',
                dataIndex: 'orderId',
                key: 'orderId',
            }, {
                title: '款号',
                dataIndex: 'styleNo',
                key: 'styleNo',
                render:(text, record)=>{
                    return record.styleNo || ''
                }
            }, {
                title: '班组',
                dataIndex: 'workName',
                key: 'workName',
                render:(text, record)=>{
                    return text && text.length > 8 ? (
                        <Tooltip
                            placement="top"
                            title={text}
                            // getPopupContainer={() => document.getElementsByClassName("order_inoutDetailModal")[0]}
                        >
                            <span className='production_process_table_workName'>{text}</span>
                        </Tooltip>
                    ) : <span>{text}</span>
                }
            },{
                title: '合同数量',
                dataIndex: 'agreement',
                key: 'agreement',
            },{
                title: '裁剪数',
                dataIndex: 'countCut',
                key: 'countCut',
            },{
                title: '裁剪欠数',
                dataIndex: 'cutQuaRemain',
                key: 'cutQuaRemain',
                className: 'redColor',
                render:(text, record)=>{
                    return record.agreement - record.countCut
                }
            },{
                title: '更新时间',
                dataIndex: 'updateTimeCut',
                key: 'updateTimeCut',
                render:(text, record)=>{
                    return Util.dateFormat(record.updateTimeCut)
                }
            },{
                title: '缝制数',
                dataIndex: 'countTailor',
                key: 'countTailor',
            },{
                title: '缝制欠数',
                dataIndex: 'sewQuaRemain',
                key: 'sewQuaRemain',
                className: 'redColor',
                render:(text, record)=>{
                    return record.agreement - record.countTailor
                }
            },{
                title: '更新时间',
                dataIndex: 'updateTimeTailor',
                key: 'updateTimeTailor',
                render:(text, record)=>{
                    return Util.dateFormat(record.updateTimeTailor)
                }
            },{
                title: '后整数',
                dataIndex: 'countClear',
                key: 'countClear',
            },{
                title: '后整欠数',
                dataIndex: 'afterQuaRemain',
                key: 'afterQuaRemain',
                className: 'redColor',
                render:(text, record)=>{
                    return record.agreement - record.countClear
                }
            },{
                title: '更新时间',
                dataIndex: 'updateTimeClear',
                key: 'updateTimeClear',
                render:(text, record)=>{
                    return Util.dateFormat(record.updateTimeClear)
                }
            },{
                title: '包装数',
                dataIndex: 'countPack',
                key: 'countPack',
            },{
                title: '包装欠数',
                dataIndex: 'packQuaRemain',
                key: 'packQuaRemain',
                className: 'redColor',
                render:(text, record)=>{
                    return record.agreement - record.countPack
                }
            },{
                title: '更新时间',
                dataIndex: 'updateTimePack',
                key: 'updateTimePack',
                render:(text, record)=>{
                    return Util.dateFormat(record.updateTimePack)
                }
            }
        ];
        return (
            <div className="production_manage_process_box">
                <div className="production_manage_process_serchdiv">
                    <span className="production_manage_process_serchspan">款号：</span>
                    <input className="pro_overflow_inputSty production_manage_process_serchInp"
                           placeholder = '请输入款号'
                           ref={'styleNo'}
                    />
                    <span style={{marginLeft:'-3px'}}>
                        <Button onClick={this._SearchByClient.bind(this)}>搜索</Button>
                    </span>
                </div>
                <Table
                    columns={columns}
                    dataSource={this.state.processData}
                    pagination={true}
                    rowKey={record => record.gid}
                    loading={this.state.loading}
                    scroll={{x: 1686}}
                    className="order_table production_process_table progress_detail_table producttion_manage_process_box_f5f"
                />
                <br/>
            </div>
        )
    }
}
